// 西瓜播放器
// import Player from 'xgplayer'
import Player from 'xgplayer/dist/core_player';
import play from 'xgplayer/dist/controls/play';
import fullscreen from 'xgplayer/dist/controls/fullscreen';
import progress from 'xgplayer/dist/controls/progress';
import volume from 'xgplayer/dist/controls/volume';
import pip from 'xgplayer/dist/controls/pip';
import flex from 'xgplayer/dist/controls/flex';
import playbackRate from 'xgplayer/dist/controls/playbackRate';
import keyboard from 'xgplayer/dist/controls/keyboard';
import screenShot from 'xgplayer/dist/controls/screenShot';
import download from 'xgplayer/dist/controls/download';
import airplay from 'xgplayer/dist/controls/airplay';
import { ref } from 'vue';

export default {
  name: 'sim-xgplayer',
  setup(props, context) {
    // 播放器绑定元素的id
    const playerId = 'player-wrapper-' + parseInt(Math.random()*10000);
    // 播放器对象
    var player = ref(null) 
    // url
    var sourceUrl = ref('https://www.w3school.com.cn/example/html5/mov_bbb.mp4')
    // var sourceUrl = ref(null)

    // 初始化播放器
    const initPlayer = () => {
      // debugger
      player = new Player({
        id: playerId,
        url: sourceUrl.value,
        // playNext: { // 后续播放列表
        //   urlList: [ 'url1', 'url2', 'url3' ],
        // },
        fitVideoSize: 'fixWidth', // 自适应视频内容宽高 'fixWidth' | 'fixHeight' | 'auto'
        // autoplay: true, // 大部分浏览器都禁止自动播放，所以此项无用
        // loop: true, // 循环播放
        // poster: '', // 封面
        videoInit: true, // 没有设置封面时，自动截取第一帧做封面。移动端无效, autoplay不可同时设置为true。
        lang: 'zh-cn', // 'zh-cn' | 'en' | 'jp'
  
        controlPlugins: [
          play,
          fullscreen,
          progress,
          volume,
          pip,
          flex,
          playbackRate,
          keyboard, 
          //screenShot, // 截图
          download,
          airplay,
        ],
        pip: true, //打开画中画功能
        playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
        defaultPlaybackRate: 1, // 默认倍速
  
        // 记忆播放
        lastPlayTime: 0, //视频起播时间（单位：秒）
        lastPlayTimeHideDelay: 5, //提示文字展示时长（单位：秒）
  
        download: true, //下载按钮
        // 截图 （会有跨域的问题）
        // screenShot: {
        //   saveImg: true,
        //   quality: 0.92,
        //   type: 'image/png',
        //   format: '.png'
        // },
        // 按键控制
        keyShortcut: 'on',
        keyShortcutStep: { //设置调整步长
          currentTime: 15, //播放进度调整步长，默认10秒
          volume: 0.1 //音量调整步长，默认0.1
        },
        errorTips: `视频加载失败！请<span>刷新</span>试试`,
        enableVideoDbltouch: true, // 移动端支持双击暂停/播放
        airplay: true,
        
      })
    }

    // 更换url
    const changeSourceUrl = () => {
      console.log("sourceUrl", sourceUrl)
      if(sourceUrl.value && player) {
        // player.src = sourceUrl.value
        player.start(sourceUrl.value)
        player.play()
      } 
    }

    return { playerId, player, sourceUrl, initPlayer, changeSourceUrl}
  },
  data() {
    return {
    }
  },
  mounted() {
    this.initPlayer()
  },


}
